<template>
  <view class="work-container">
	  <view class="example-body" style="margin-top: 40rpx;">
		  <uni-row class="demo-uni-row" >
		  	<uni-col :span="5">
				<text  style="font-size: 18px;">{{this.$store.state.user.name.slice(0,5)}}*</text>
		  	</uni-col>
		  <uni-col :span="5">
		  	<text style="font-size: 18px;">{{bindWorkshopName}}</text>
		  </uni-col>
		  <uni-col :span="8">
		  	<text style="font-size: 18px;">{{bindStationName}}</text>
		  </uni-col>
		  	<uni-col :span="6">
				<button type="primary" size="mini" @click="onClickItem">绑定工位</button>
		  	</uni-col>
		  </uni-row>
	  </view>
	
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper" 
	  autoplay="true" interval="10000"
	  duration="500">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)" >
            <image :src="item.imagePath" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
	 <uni-section title="公告栏" type="line"></uni-section>
	 <view class="noticesList">
	 	<block v-for="(item,index) in activitys" :key="index" wx:key="index">
	 		<view  @tap="toDetail(item)">
	 			<view >
					<uni-notice-bar show-get-more show-icon more-text="查看更多" @getmore="getMore(item)" :text="item.noticeTitle" />
	 			</view>
	 		</view>
	 	</block>
	 </view>
	 <!-- 普通弹窗 -->
	 <uni-popup ref="popup" background-color="#fff" >
		 <view style="height: 800rpx; width: 500rpx;padding: 30rpx;">
			 <rich-text :nodes="nodes" ></rich-text>
		 </view>
	</uni-popup>
	<uni-section title="待办事项" type="line"></uni-section>
		<uni-list>
			<view v-for="(item,index) in toDoListData" :key="index">
				<uni-list-item showArrow rightText="前去处理"
								link="redirectTo" @click="onClick(item.url)">
					<template v-slot:header>
						<view class="slot-box">
							<text style="margin-right: 10rpx;">{{item.text}}</text>	
							<uni-tag :circle="true" :text="item.count" type="error" v-show="item.count>0"/>
						</view>
					</template>
				</uni-list-item>
			</view>
		</uni-list>
	</uni-section>
  </view>
</template>

<script>
	import {  getStation} from "@/api/masterdata/station";
	import { mobileBindUserStation,getInfoByUserId } from "@/api/common/sysUserStation";
	import storage from '@/utils/storage';
	import {scanCodeBindStation} from '@/utils/mesUntil.js'
	import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
	import { listCarousel, getCarousel, delCarousel, addCarousel, updateCarousel } from "@/api/system/carousel";
	import {  getToDoList} from "@/api/system/mobileApi.js";
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [],
		activitys: [],
		items:[{"message":"123"}],
		bindStationName: "?工位",
		bindWorkshopName: "?车间",
		nodes: '',
		toDoListData: []
      }
    },
	created() {
		this.getSysUserStationList();
		this.getNoticeList();
		this.getListCarousel();
		this.toDoList();
	},
    methods: {
      clickBannerItem(item) {
      },
      changeSwiper(e) {
        this.current = e.detail.current
		 this.reset();
      },
	  toDetail: function(item) {
	  	// this.context.navigateTo({
	  	// 	url: '/pages/activityDetail/activityDetail?activitiesId=' + _item.activitiesId +
	  	// 		"&currentCommunityId=" + this.currentCommunityId
	  	// });
	  },
	  onClick(url) {
		  this.reset();
		this.$tab.navigateTo(url);
	  },
	  onClickItem() {
	   let _this =this;
	   scanCodeBindStation(_this);
	  },
	  getSysUserStationList(){
	  	getInfoByUserId().then(response => {
	  		this.bindStationName=response.data.stationName;
	  		this.bindWorkshopName=response.data.workshopName;
	  	});
	  },
	  // 表单重置
	  reset() {
		this.getSysUserStationList();
	  },
	  getNoticeList(){
		  listNotice({status :'0'}).then(res =>{
			  this.activitys=res.rows;
		  })
	  },
	  getMore(item){
		  this.nodes=item.noticeContent;
		  this.$refs.popup.open()
	  },
	  getListCarousel(){
		  listCarousel({pageSize: 99999 ,type: 'A',orderByColumn : 'sort',column : 'asc'}).then(res =>{
			  this.data = res.rows;
		  })
	  },
	  toDoList(){
		  getToDoList().then( res =>{
			  this.toDoListData=res;
			  console.log("res===>",res)
		  })
	  }
    }
  }
</script>

<style lang="scss">
	
  /* #ifndef APP-NVUE */
  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 300rpx;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }
    .image {
      width: 100%;
    }
  }
  
  .noticesList {
  	background-color: #FFFFFF;
  }
  
  .noticesList-list {
  	font-size: 25px;
  	display: flex;
  	width: 100%;
  	padding: 10rpx 0;
  	border-bottom: 1rpx solid #ECECEC;
  	color: #6D6D6D;
  	justify-content: space-between;
  }
  
  .notices-info-name {
  	margin-top: 10rpx;
  	color: black;
  	font-size: 30rpx;
  	display: -webkit-box;
  	/*设置为弹性盒子*/
  	-webkit-line-clamp: 2;
  	/*最多显示5行*/
  	overflow: hidden;
  	/*超出隐藏*/
  	text-overflow: ellipsis;
  	/*超出显示为省略号*/
  	-webkit-box-orient: vertical;
  	word-break: break-all;
  	/*强制英文单词自动换行*/
  }
  
  .notices-info-image image {
  	width: 200rpx;
  	height: 150rpx;
  	margin: 10rpx 20rpx 0rpx 20rpx;
  	border-radius: 10rpx;
  }
  
  .notices-info {
  	margin: 10rpx 0rpx 0rpx 20rpx;
  	height: 150rpx;
  	flex-direction: column;
  	display: flex;
  	justify-content: space-between;
  }
  
  .notice-startTime {
  	margin-left: 16upx;
  }
  
  .demo-uni-row {
  		margin-bottom: 5px;
  
  		// 组件在小程序端display为inline
  		// QQ、字节小程序文档写有 :host，但实测不生效
  		// 百度小程序没有 :host
  		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
  		display: block;
  		/* #endif */
  	}
	
	.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 10rpx 10rpx 0;
			overflow: hidden;
	}
  
</style>
